<template>
  <div class="map-view">
    <div id="viewDiv"></div>
    <!--  自定义控件位置（地图切换）  -->
    <div id="baseMapToggle"></div>
    <!--  自定义控件位置（比例尺）  -->
    <div id="scaleBar"></div>
    <!--  自定义控件位置（缩放控件）  -->
    <div id="zoom"></div>
    <!--  二三位切换  -->
    <div class="view-change" @click="handleView">
      <span>{{viewModel}}</span>
    </div>
  </div>
</template>

<script>
import Map from "@arcgis/core/Map.js"; // 地图视图
import MapView from "@arcgis/core/views/MapView.js"; // 实例化二维地图
import Basemap from "@arcgis/core/Basemap.js"; // 定义地图数据
import TileLayer from "@arcgis/core/layers/TileLayer.js"; // 加载切片图层
import BasemapToggle from "@arcgis/core/widgets/BasemapToggle.js"; //地图控件（底图切换）
import ScaleBar from "@arcgis/core/widgets/ScaleBar.js"; // 地图控件 （比例尺）
import Zoom from "@arcgis/core/widgets/Zoom.js" // 地图控件 （放缩）
import SceneView from "@arcgis/core/views/SceneView.js"; // 实例化三维地图

export default {
  name: "mapView",
  data() {
    return {
      viewModel:'3D'
    }
  },
  mounted() {
    // 初始化地图
    this.createMapView()
  },
  methods:{
    // 初始化地图
    async createMapView() {
      // 清空定义的控件
      document.getElementById('baseMapToggle').innerHTML = '';
      document.getElementById('scaleBar').innerHTML = '';
      document.getElementById('zoom').innerHTML = '';
      // 使用切片图层
      let basemap = new Basemap({
        baseLayers: [
          new TileLayer({
            // 使用了公网发布的地图数据
            url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            title: "Basemap"
          })
        ],
        title: "basemap",
        id: "basemap"
      });

      const map = new Map({
        basemap
      })

      const mapView = new MapView({
        container: "viewDiv",
        map,
        zoom: 10,
        center: [101.561594,24.424146]
      })

      // 实例化地图切换控件（底图切换）
      let basemapToggle = new BasemapToggle({
        view: mapView,
        // 控制的是下一次底图是什么
        nextBasemap: "hybrid",
        // 自定义控件位置所定义的div的ID,设置其div的样式即可自定义位置
        container:"baseMapToggle"
      });

      // 把控件添加到地图上,使用 arcgis 提供的默认位置（4个）
      // mapView.ui.add(basemapToggle, {
      //   // 控制控件的位置 top-right top-left bottom-right bottom-left
      //   position: "bottom-right"
      // });
      console.log(basemapToggle);
      // 把控件添加到地图上，自定义控件位置
      mapView.ui.add(basemapToggle);

      // 实例化地图控件 （比例尺）
      let scaleBar = new ScaleBar({
        view: mapView,
        // 单位（"non-metric"|"metric"|"dual"）
        unit:'metric',
        container:"scaleBar"
      });
      mapView.ui.add(scaleBar);

      // 实例化地图控件 （缩放控件）
      let zoom = new Zoom({
        view: mapView,
        container:"zoom"
      });
      mapView.ui.add(zoom);
      // 删除默认控件
      mapView.ui.components = [];
      // 保存 mapView 到vuex
      this.$store.commit('setDefaultMapView',mapView)
    },
    // 初始化三维地图
    createSceneView() {
      // 清空定义的控件
      document.getElementById('baseMapToggle').innerHTML = '';
      document.getElementById('scaleBar').innerHTML = '';
      document.getElementById('zoom').innerHTML = '';
      let basemap = new Basemap({
        baseLayers: [
          new TileLayer({
            // 使用了公网发布的地图数据
            url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            title: "Basemap"
          })
        ],
        title: "basemap",
        id: "basemap"
      });
      const map = new Map({
        basemap,
        // 地面预设
        // ground: "world-elevation"
      })
      const sceneView = new SceneView({
        container: "viewDiv",
        map
      })
      // 跳转到具体位置
      setTimeout(() => {
        sceneView.goTo({
          zoom: 10,
          center: [101.561594,24.424146]
        })
      },3000)
      // 删除默认控件
      sceneView.ui.components = [];
      this.$store.commit('setDefaultMapView',sceneView)
      // this.$store.commit('createSceneView',sceneView)
    },
    // 二三维地图切换
    handleView() {
      if (this.viewModel === '3D') {
        // 初始化三维地图
        this.createSceneView();
        this.viewModel = '2D';
      } else {
        // 初始化二维地图
        this.createMapView();
        this.viewModel = '3D';
      }
    }
  }
}
</script>

<style scoped>
.map-view,#viewDiv {
  position: relative;
  height: 100%;
  width: 100%;
}
/*自定义控件位置（底图切换）*/
#baseMapToggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 99;
}

/*自定义地图控件（比例尺）*/
#scaleBar {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 99;
}

/*自定义地图控件（缩放）*/
#zoom {
  position: absolute;
  left: 20px;
  top: 60px;
  z-index: 99;
}

/*二三维切换样式*/
.view-change {
  width: 32px;
  height: 32px;
  background: #ffffff;
  color: #6E6E6E;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 99;
  cursor: pointer;
}
</style>